<template>
  <div class="welcome">
    <div class="top">
      <div class="article">
        <div class="article__user">
          <div class="article__user--avatar">
            <el-avatar size="large" :src="$store.getters.avatarUrl"></el-avatar>
          </div>
          <div class="article__user--info">
            <p class="user--info__nickname">
              {{ $store.state.userInfo.nickname }}
            </p>
            <p class="user--info__position">web开发工程师</p>
          </div>
          <div class="article__user--setting">
            <!-- 设置按钮 -->
            <i class="iconfont icon-shezhi" @click="jumpToMine"></i>
          </div>
        </div>
        <div class="article__date">
          <div class="calendar">
            <div class="date-title">日历</div>
            <el-calendar v-model="date" height="100%"> </el-calendar>
          </div>
        </div>
      </div>
      <div class="aside">
        <div class="aside--message">
          <div class="aside--message__left">
            <div class="message--left__hello">早上好</div>
            <div class="message--left__weather">
              南京天气阴
              <i class="iconfont icon-duoyun"></i>
            </div>
          </div>
          <div class="aside--message__notify">通知公告</div>
        </div>
        <div class="aside--tarsk">
          <div class="tarsk--general">
            <h4>任务概况</h4>
            <div class="echartsGeneral" ref="echartsGeneral"></div>
          </div>
          <div class="tarsk--fact">
            <h4>本月工作进度完成情况</h4>
            <ul class="tarsk--detail__list">
              <li
                v-for="(item, index) in workDataDetail"
                :key="item.name + index"
              >
                <p>{{ item.value }}</p>
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 阶段学习情况 -->
    <div class="bottom--achieve">
      <div class="bottom--achieve__left">
        <div class="achieveCharts" ref="achieveCharts"></div>
      </div>
      <!-- 期望课程 -->
      <div class="bottom--achieve__right">
        <div class="expectCharts" ref="expectCharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { taskDataApi, lineDataApi, expectDataApi } from "@/api";
//1.引入ecahrts
import * as echarts from "echarts";
//2.初始化echarts
//需要一个dom容器
//需要一个配置项option
//特别注意!!!!:容器一定要有高度
export default {
  data() {
    return {
      date: new Date(),
      workDataDetail: [],
    };
  },
  methods: {
    jumpToMine() {
      this.$router.push({ name: "mine" });
    },
  },
  mounted() {
    this.$nextTick(function () {
      let option = {
        tooltip: {
          trigger: "item",
          show: true,
        },
        legend: {
          top: "50%",
          left: "right",
          orient: "vertical", //排列方式垂直
        },
        color: ["#2DB5A1", "#EA430C", "#8F85E8"],
        series: [],
      };
      // 任务概览
      let generalCharts = echarts.init(this.$refs.echartsGeneral); //传递一个dom元素
      //传入配置项
      generalCharts.setOption(option);
      //发送异步请求获取数据
      taskDataApi().then((res) => {
        let data = res.data.data;
        this.workDataDetail = data;
        let series = {
          name: "bug修复进度",
          type: "pie",
          center: ["40%", "50%"], //调整饼图在容器中的位置
          radius: ["50%", "80%"], //半径
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center", //让数据提示在圆环中间
            formatter: "{d}%",
            textStyle: {
              fontSize: "20",
              fontWeight: "bolder",
            },
          },
          emphasis: {
            //强调 鼠标移入到饼图上会对该数据进行强调
            label: {
              show: true,
              position: "outer",
              fontSize: "15",
              fontWeight: "bold",
              color: "red",
            },
          },
          labelLine: {
            show: true,
          },
          data,
        };
        generalCharts.setOption({
          series,
        });
      });

      //阶段学习情况
      let achieveCharts = echarts.init(this.$refs.achieveCharts);
      //期望课程
      let expectCharts = echarts.init(this.$refs.expectCharts);
      //折线图选项
      let achieveChartsOption = {
        legend: {
          left: "85%",
          top: "bottom",
        },
        xAxis: {
          //x轴
          type: "category",
          data: [],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false, //是否隐藏坐标轴
        },
        label: {
          //提示内容
          show: true,
          formatter: "{b}:{c}%", //格式化内容
        },
        series: [],
      };
      //期望模块饼图选项
      let expectChartsOption = {
        tooltip: {
          show: true,
          trigger: "item", //散点图和饼图的可以使用item触发
        },
        legend: {
          //表示数据的提示
          top: "5%", //距离顶部偏移5%
          left: "80%", //靠左排列的位置
          top: "bottom", //靠顶部排列的位置
          orient: "vertical", //排列方向 horizontal
          itemWidth: 10, //提示框的宽度
          itemHeight: 10, //提示框的高度
          textStyle: {
            //设置字体样式
            // color:"#fff"//颜色
          },
        },
        color: ["#D75A3A", "#CE1908", "#55A49F"], //设置环形图颜色
        series: [
          //系列
        ],
      };
      achieveCharts.setOption(achieveChartsOption);
      //折线图异步请求
      lineDataApi().then((res) => {
        let data = res.data.data;
        // console.log(data);
        let xData = [];
        let sData = data.map((item) => {
          xData.push(item.name);
          return item.rate;
        });

        achieveCharts.setOption({
          xAxis: {
            data: xData,
          },
          series: [
            {
              name: "学习进度",
              data: sData,
              type: "line",
              smooth: 1, //是否开启平衡曲线
            },
          ],
        });
      });
      expectCharts.setOption(expectChartsOption);
      //底部环形图异步请求
      expectDataApi().then((res) => {
        let data = res.data.data;
        let sData = data.map((item) => {
          return {
            value: item.rate,
            name: item.title,
          };
        });
        expectCharts.setOption({
          series: {
            name: data.desc,
            type: "pie",
            radius: ["40%", "70%"], //半径
            avoidLabelOverlap: true, //重要属性 防止标签重叠
            label: {
              //文字数据提示
              show: true,
              position: "outer", //可以是inner center outer设置提示位置
              formatter: "{b}:{d}%", //\n\n很关键 能够让文字显示在牵引线上方
              // padding: [0, -50]//文字的padding位置
            },
            emphasis: {
              //强调(当鼠标移入的时候显示的强调内容)
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              //牵引线
              show: true,
              length: 10, //牵引线长度
              length2: 10,
              lineStyle: {
                //牵引线颜色
                color: "#808080",
              },
            },
            data: sData,
          },
        });
      });
      window.onresize = function () {
        generalCharts.resize();
      };
    });
  },
};
</script>
<style scoped>
div {
  border-radius: 10px;
}
.date-title {
  height: 30px;
  background: #2aac98;
  color: #fff;
  line-height: 30px;
  font-weight: bolder;
  border-radius: 10px 10px 0 0;
}
.calendar >>> .el-calendar-day {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.calendar >>> .el-calendar-table thead th {
  padding-top: 0;
  padding-bottom: 0;
}
.calendar >>> .el-calendar__header {
  padding-top: 5px;
  padding-bottom: 5px;
}
.calendar >>> .el-calendar__body {
  padding-top: 0;
  padding-bottom: 0;
}
.welcome {
  margin-top: 5px;
  color: #666;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  /* background: #131925; */
}
.top {
  display: flex;
  flex: 7;
  justify-content: space-around;
  margin-bottom: 5px;
  margin: 5px;
}
.bottom--achieve {
  display: flex;
  flex: 3;
}
.bottom--achieve__left {
  flex: 5;
  margin-right: 10px;
}
.bottom--achieve__right {
  flex: 5;
}
.echartsGeneral {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
}
.achieveCharts {
  height: 100%;
}
.expectCharts {
  height: 100%;
}
.article {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 5px;
}
.aside {
  flex: 7;
  display: flex;
  flex-direction: column;
}
.aside--message {
  flex: 5;
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
}
.aside--tarsk {
  display: flex;
  justify-content: space-between;
  flex: 5;
  align-items: center;
}
div {
  flex-shrink: 0.6;
}
.tarsk--general {
  /* width: 100%; */
  height: 100%;
  flex: 5;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
}
.tarsk--general h4 {
  text-align: left;
  padding-left: 5%;
  margin-top: 10px;
}
.tarsk--fact {
  display: flex;
  flex: 5;
  justify-content: space-between;
  flex-direction: column;
}
.tarsk--fact ul {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.aside--message__left {
  flex: 4;
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}
.aside--message__notify {
  display: flex;
  flex: 6;
  display: flex;
  flex-direction: column;
}
.message--left__hello {
  flex: 5;
  margin-bottom: 5px;
}
.message--left__weather {
  flex: 5;
}
.article__user {
  display: flex;
  flex: 4;
  margin-bottom: 5px;
  justify-content: space-around;
  align-items: center;
}
.article__user--avatar {
  flex: 3;
}
.article__user--info {
  flex: 3;
}
.article__user--setting {
  flex: 1;
  height: 100%;
  position: relative;
}
.article__user--setting i {
  position: absolute;
  top: 5px;
  right: 10px;
}
.article__user--avatar >>> .el-avatar--large {
  width: 80px;
  height: 80px;
}
.article__date {
  height: 100%;
  flex: 6;
}

.article__user,
.article__date,
.message--left__hello,
.message--left__weather,
.aside--tarsk,
.aside--message__notify,
.bottom--achieve {
  /* background: #202835; */
  background: #fff;
  /* border: 1px solid #ccc; */
}
</style>
